<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>${patient.name } - Qualicare Diagnostic Lab and Records</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>
<script type="text/javascript" src="dateformat.js"></script>
<script type="text/javascript" src="view_patient.js"></script>
<link rel="stylesheet" href="bootstrap.css" />
<link rel="stylesheet" href="base.css" />
</head>
<body>
	<div class="container">
		<div class="navbar">
			<div class="navbar-inner">
				<div class="container">
					<ul class="nav">
						<li><a class="brand" href="#">QDLC</a></li>
						<li class="active"><a href="/Patients">Patients</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="page-header">
			<h1>Qualicare Diagnostic Lab and Records</h1>
			<h4>Service and Reliability</h4>
		</div>
		<div class="row">
			<div class="span6">
				<img alt="patient-image"
					src="http://www.theprprofessional.com/wp-content/uploads/2011/11/facebook-profile-picture.jpg">
				<div class="row-fluid">
					<div class="span12" style="border-bottom: 1px solid #d3d3d3;">
						<h2>Patient Profile</h2>
					</div>
				</div>
				<dl class="dl-horizontal">
					<dt>Patient ID</dt>
					<dd id="patientId">${patient.patientId }</dd>
					<dt>Patient Name</dt>
					<dd>${patient.name }</dd>
					<dt>Clinical Status</dt>
					<dd>${patient.status }</dd>
					<dt>Gender</dt>
					<dd>${patient.gender }</dd>
					<dt>Date of Birth</dt>
					<dd class="dateonlyformat">${patient.dateOfBirth }</dd>
					<dt>Address</dt>
					<dd>${patient.address }</dd>
					<dt>Occupation</dt>
					<dd>${patient.occupation }</dd>
					<dt>Physician</dt>
					<dd>${patient.physician }</dd>
					<dt>Medical History</dt>
					<dd>${patient.medicalHistory }</dd>
					<dt>Date of Registration</dt>
					<dd class="dateonlyformat">${patient.dateOfRegistration }</dd>
				</dl>
			</div>
			<div class="span6">
				<div class="row-fluid"
					style="border-bottom: 1px solid #d3d3d3; margin-bottom: 15px;">
					<div class="span6">
						<h3>Consultation Records</h3>
					</div>
					<div class="span6">
						<a data-toggle="modal" href="#new_consultation_record_modal"
							class="btn btn-primary pull-right"
							onclick="clearConsultationForm()">New Consultation Record</a>
					</div>
					<div class="row-fluid">
						<div class="span12" style="border-top: 1px solid #d3d3d3;">
							<table class="table table-stripped"
								id="consultation_records_table">
								<thead>
									<tr>
										<th>ID</th>
										<th>Complaint</th>
										<th>Staff</th>
									</tr>
								</thead>
								<tbody>
									<c:forEach var="consultationRecord"
										items="${consultationRecords }">
										<tr>
											<td>${consultationRecord.consultationRecordId }</td>
											<td><p
													style="height: 20px; width: 60ex; overflow: hidden; padding: 0px; margin: 0px; cursor: pointer;"
													onclick="openConsultationRecord(${consultationRecord.consultationRecordId})">
													<a>${consultationRecord.complaints }</a>
												</p></td>
											<td>${consultationRecord.staffId }</td>
										</tr>
									</c:forEach>
								</tbody>
							</table>
						</div>
					</div>
				</div>
				<div class="row-fluid"
					style="border-bottom: 1px solid #d3d3d3; margin-bottom: 15px;">
					<div class="span6">
						<h3>Diagnostic Test Records</h3>
					</div>
					<div class="span6">
						<a data-toggle="modal" href="#new_diagnostic_test_record_modal"
							class="btn btn-primary pull-right"
							onclick="clearDiagnosticTestForm()">New Diagnostic Test
							Record</a>
					</div>
					<div class="row-fluid">
						<div class="span12" style="border-top: 1px solid #d3d3d3;">
							<table class="table table-stripped" id="diagnostic_tests_table">
								<thead>
									<tr>
										<th>ID</th>
										<th>Test</th>
										<th>Staff</th>
									</tr>
								</thead>
								<tbody>
									<c:forEach var="labTestRecord" items="${labTestRecords }">
										<tr>
											<td>${labTestRecord.labTestRecord }</td>
											<td><p
													style="height: 20px; width: 60ex; overflow: hidden; padding: 0px; margin: 0px; cursor: pointer;"
													onclick="openDiagnosticTestRecord(${labTestRecord.labTestRecord})">
													<a class="dateonlyformat">${labTestRecord.date}</a>
												</p></td>
											<td>${labTestRecord.staffId }</td>
										</tr>
									</c:forEach>
								</tbody>
							</table>
						</div>
					</div>
				</div>
				<div class="row-fluid"
					style="border-bottom: 1px solid #d3d3d3; margin-bottom: 15px;">
					<div class="span6">
						<h3>Dental Records</h3>
					</div>
					<div class="span6">
						<a data-toggle="modal" href="#new_dental_record_modal"
							class="btn btn-primary pull-right" onclick="clearDentalForm()">New
							Dental Record</a>
					</div>
				</div>
			</div>
		</div>
		<hr>
		<footer> &copy; QDLC 2012. All Rights Reserved. </footer>
	</div>

	<!-- Modals -->
	<div id="new_consultation_record_modal" class="modal hide fade">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal">&times;</button>
			<h3>New Consultation Record</h3>
		</div>
		<div class="modal-body">
			<div class="row-fluid">
				<div class="span12">
					<form class="form-horizontal">
						<fieldset>
							<div class="control-group">
								<label class="control-label" for="textarea">Complaints</label>
								<div class="controls">
									<textarea class="input-xlarge" id="complaints_input" rows="4"></textarea>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="textarea">Diagnosis</label>
								<div class="controls">
									<textarea class="input-xlarge" id="diagnosis_input" rows="4"></textarea>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="textarea">Prescription</label>
								<div class="controls">
									<textarea class="input-xlarge" id="prescription_input" rows="4"></textarea>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="price_input">Price</label>
								<div class="controls">
									<input type="text" class="input" id="price_input">
								</div>
							</div>
						</fieldset>
					</form>
				</div>
			</div>

		</div>
		<div class="modal-footer">
			<a href="#" class="btn btn-primary" onclick="addConsultationRecord()">Finish</a>
		</div>
	</div>

	<div id="view_consultation_record_modal" class="modal hide fade">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal">&times;</button>
			<h3>View Consultation Record</h3>
		</div>
		<div class="modal-body">
			<div class="row-fluid">
				<div class="span12">
					<dl class="dl-horizontal">
						<dt>Staff</dt>
						<dd id="view_consultation_record_staff"></dd>
						<dt>Date</dt>
						<dd id="view_consultation_record_date"></dd>
						<dt>Price</dt>
						<dd id="view_consultation_record_price"></dd>
						<dt>Complaints</dt>
						<dd id="view_consultation_record_complaints"></dd>
						<dt>Diagnosis</dt>
						<dd id="view_consultation_record_diagnosis"></dd>
						<dt>Prescription</dt>
						<dd id="view_consultation_record_prescription"></dd>
					</dl>
				</div>
			</div>
		</div>
		<div class="modal-footer">
			<a href="#" class="btn btn-primary" data-dismiss="modal">Close</a>
		</div>
	</div>

	<div id="new_diagnostic_test_record_modal" class="modal hide fade">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal">&times;</button>
			<h3>New Diagnostic Test Record</h3>
		</div>
		<div class="modal-body">
			<div class="row-fluid">
				<div class="span12">
					<div class="form-horizontal">
						<fieldset>
							<div class="control-group">
								<label class="control-label">Status</label>
								<div class="controls">
									<label class="radio"> <input type="radio"
										name="diagnosticTestStatus" id="in_queue_radio" value="1">
										In Queue
									</label> <label class="radio"> <input type="radio"
										name="diagnosticTestStatus" id="on_going_radio" value="2">
										On Going
									</label> <label class="radio"> <input type="radio"
										name="diagnosticTestStatus" id="processed_radio" value="3">
										Processed
									</label> <label class="radio"> <input type="radio"
										name="diagnosticTestStatus" id="paid_radio" value="4">
										Paid
									</label>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="labTests">Lab Tests</label>
								<div class="controls">
									<select id="labTests">
										<c:forEach var="labTest" items="${labTests }">
											<option value="${labTest.price }"
												labTestId="${labTest.labTestId }">${labTest.labTestCategory.categoryName
												}-${labTest.name }</option>
										</c:forEach>
									</select>
									<button class="btn btn-mini btn-primary" onclick="addTest()">Add</button>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="select01">Current List</label>
								<div class="controls">
									<table
										class="table table-stripped table-bordered table-condensed"
										id="list_of_tests_table">
										<thead>
											<tr>
												<th>Test Name</th>
												<th>Price</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td>Sexyness Test</td>
												<td>500.00</td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
						</fieldset>
					</div>
				</div>
			</div>

		</div>
		<div class="modal-footer">
			<a href="#" class="btn btn-primary"
				onclick="addDiagnosticTestRecord()">Finish</a>
		</div>
	</div>

	<div id="view_diagnostic_test_record_modal" class="modal hide fade">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal">&times;</button>
			<h3>View Diagnostic Test Record</h3>
		</div>
		<div class="modal-body">
			<div class="row-fluid">
				<div class="span12">
					<dl class="dl-horizontal">
						<dt>Record ID</dt>
						<dd id="view_diagnostic_test_record_id"></dd>
						<dt>Staff</dt>
						<dd id="view_diagnostic_test_record_staff"></dd>
						<dt>Date</dt>
						<dd id="view_diagnostic_test_record_date"></dd>
						<dt>Total Price</dt>
						<dd id="view_diagnostic_test_record_price"></dd>
						<dt>Status</dt>
						<dd id="view_diagnostic_test_record_status"></dd>
						<dt>Tests Conducted</dt>
						<dd>
							<table class="table table-stripped" id="view_diagnostic_test_record_tests">
								<thead>
									<tr>
										<th>Category</th>
										<th>Name</th>
										<th>Price</th>
									</tr>
								</thead>
								<tbody>
								</tbody>
							</table>
						</dd>
					</dl>
				</div>
			</div>
		</div>
		<div class="modal-footer">
			<a href="#" class="btn btn-primary" data-dismiss="modal">Close</a>
		</div>
	</div>

	<div id="new_dental_record_modal" class="modal hide fade">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal">&times;</button>
			<h3>New Dental Record</h3>
		</div>
		<div class="modal-body">
			<div class="row-fluid">
				<div class="span12">
					<form class="form-horizontal">
						<fieldset>
							<div class="control-group">
								<label class="control-label" for="textarea">Complaints</label>
								<div class="controls">
									<textarea class="input-xlarge" id="complaints_input" rows="4"></textarea>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="textarea">Diagnosis</label>
								<div class="controls">
									<textarea class="input-xlarge" id="diagnosis_input" rows="4"></textarea>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="textarea">Prescription</label>
								<div class="controls">
									<textarea class="input-xlarge" id="prescription_input" rows="4"></textarea>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="price_input">Price</label>
								<div class="controls">
									<input type="text" class="input" id="price_input">
								</div>
							</div>
						</fieldset>
					</form>
				</div>
			</div>

		</div>
		<div class="modal-footer">
			<a href="#" class="btn btn-primary" onclick="addDentalRecord()">Finish</a>
		</div>
	</div>
	<!-- End Modals -->
</body>
</html>